import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

import { detailApi } from "@/api/detail";

const Index = () => {
  const params = useParams();
  const [detailInfo, setDetailInfo] = useState({});

  useEffect(() => {
    (async () => {
      const res = await detailApi({ id: params.id });
      // console.log(res);
      setDetailInfo(res.result);
    })();
  }, [params.id]);

  return detailInfo.img ? (
    <div>
      <p>{detailInfo.nm}</p>
      <img src={detailInfo.img.split("/w.h").join("")} alt="" />
    </div>
  ) : null;
};

export default Index;
